<template>
  <view
    v-show="visibleSync"
    class="cat-signature"
    :class="{ visible: show }"
    @touchmove.stop.prevent="moveHandle"
  >
    <view class="mask" @tap="close" />
    <view class="content">
      <canvas
        class="firstCanvas"
        :canvas-id="canvasId"
        @touchmove="move"
        @touchstart="start($event)"
        @touchend="end"
        @touchcancel="cancel"
        @longtap="tap"
        disable-scroll="true"
        @error="error"
      />
      <view class="btns">
        <view class="btn" @tap="clear">清除</view>
        <view class="btn" @tap="save">保存</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { file } from "@/api/file.js";
import { apis } from "@/api/zygl/zyp.js";
import { useUserStore } from "@/store/modules/user.js";
import { nextTick } from "vue";
import {
  defineEmits,
  defineProps,
  ref,
  reactive,
  watch,
  onMounted,
  getCurrentInstance,
} from "vue";
const userStore = useUserStore();
const proxy = getCurrentInstance();
var content = null;
var touchs = [];
var canvasw = 100;
var canvash = 100;

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  canvasId: {
    type: String,
    default: "firstCanvas",
  },
});

const emits = defineEmits(["close", "save", "clear"]);
const show = ref(false);
const visibleSync = ref(false);
const signImage = ref("");
const hasDh = ref(false);

watch(
  () => props.visible,
  (val) => {
    visibleSync.value = val;
    show.value = val;
    nextTick().then(() => {
      getInfo();
    });
  }
);

onMounted(() => {
  visibleSync.value = props.visible;
  setTimeout(() => {
    show.value = props.visible;
    getInfo();
  }, 100);
});

const getInfo = () => {
  //获得Canvas的上下文

  content = uni.createCanvasContext(props.canvasId, getCurrentInstance());
  //设置线的颜色
  content.setStrokeStyle("#000");
  //设置线的宽度
  content.setLineWidth(3.5);
  //设置线两端端点样式更加圆润
  content.setLineCap("round");
  //设置两条线连接处更加圆润
  content.setLineJoin("round");
};

const close = () => {
  show.value = false;
  hasDh.value = false;
  //清除画布
  content.clearRect(0, 0, 100000, 100000);
  content.draw(true);
  hasDh.value = false;
  emits("clear");
  emits("close");
};
const moveHandle = () => {};

const start = (e) => {
  let point = {
    x: e.touches[0].x,
    y: e.touches[0].y,
  };
  touchs.push(point);
  hasDh.value = true;
};

const move = (e) => {
  let point = {
    x: e.touches[0].x,
    y: e.touches[0].y,
  };
  touchs.push(point);
  if (touchs.length >= 2) {
    draw(touchs);
  }
};

const end = () => {
  //清空轨迹数组
  for (let i = 0; i < touchs.length; i++) {
    touchs.pop();
  }
};
const cancel = () => {};
const tap = () => {};
const error = () => {};

const draw = (e) => {
  let point1 = touchs[0];
  let point2 = touchs[1];
  content.moveTo(point1.x, point1.y);
  content.lineTo(point2.x, point2.y);
  content.stroke();
  content.draw(true);
  touchs.shift();
};
const clear = () => {
  //清除画布
  content.clearRect(0, 0, 100000, 100000);
  content.draw(true);
  hasDh.value = false;
  emits("clear");
};

const save = () => {
  if (!hasDh.value) {
    uni.showToast({ title: "请先签字", icon: "none" });
    return;
  }
  uni.showLoading({ title: "生成中...", mask: true });
  // return;
  setTimeout(() => {
    uni.canvasToTempFilePath({
      canvasId: props.canvasId,
      success: function (res) {
        signImage.value = res.tempFilePath;
        file.upload(res.tempFilePath, (fileRes) => {
          // apis.signLog({
          //   fileAddress: fileRes.data.fileUrl,
          //   equipmentId: userStore.phoneId,
          //   accountId: userStore.userId,
          // });
          emits("save", fileRes.data.fileUrl);
          uni.hideLoading();
          hasDh.value = false;
          show.value = false;
          clear();
        });
      },
      fail: function (err) {
        console.log(err);
        uni.hideLoading();
      },
    });
  }, 100);
  uni.hideLoading();
};
</script>

<style lang="scss">
.cat-signature.visible {
  visibility: visible;
}
.cat-signature {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 11;
  height: 100vh;
  visibility: hidden;
  .mask {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s;
  }
  .content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 94%;
    height: 350upx;
    background: #fff;
    border-radius: 8upx;
    box-shadow: 0px 3px 3px #333;
    // canvas
    .firstCanvas {
      background-color: #fff;
      width: 100%;
      height: 350upx;
    }
    // canvas

    .btns {
      padding: 0 15px;
      height: 100upx;
      overflow: hidden;
      position: absolute;
      bottom: 10upx;
      left: 0;
      right: 0;
      bottom: -100upx;
      background-color: #fff;
      margin: auto;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 40%;
        text-align: center;
        font-size: 28upx;
        height: 60upx;
        line-height: 60upx;
        background-color: #999;
        color: #fff;
        border-radius: 6upx;
      }
    }
  }
}

.visible .mask {
  display: block;
  opacity: 1;
}
</style>
